<template>
  <div class="banner">
    <b-carousel
      fade
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      :controls="banner.length > 1"
      background="#ababab"
    >
      <b-carousel-slide
        v-for="(item, index) in banner"
        :key="index"
        :img-src="staticHost + item.pic"
      >
        <div class="txt">
          <dir class="icon">
            <b-img
              width="12px"
              height="17px"
              fluid
              style="margin-right: 5px;"
              :src="require(`~/static/img/bg_sy_banner_small.png`)"
              alt=""
            />
            <b-img
              :width="12"
              :height="24"
              fluid
              :src="require(`~/static/img/bg_sy_banner_big.png`)"
              alt=""
            />
          </dir>
          <p>{{ item.name }}</p>
          <p>{{ item.intro }}</p>
        </div>
      </b-carousel-slide>
      <ul class="list">
        <li class="item">
          <p><b>10</b> <span>年</span></p>
          <p>行业积淀</p>
        </li>
        <li class="item">
          <p><b>30</b> <span>家</span></p>
          <p>合作单位</p>
        </li>
        <li class="item">
          <p><b>10000,00</b> <span>人</span></p>
          <p>服务用户数</p>
        </li>
        <li class="item">
          <p><b>20</b> <span>年</span></p>
          <p>知识产权</p>
        </li>
      </ul>
    </b-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banner: [],
      slide: 0
    };
  },
  computed: {
    staticHost() {
      return this.$store.state.staticHost;
    }
  },
  async fetch() {
    const { data: bannerList = [] } = await this.$http.$get(`api/banner`);
    this.banner = bannerList.map(v => {
      v.pic = v.pic ? v.pic.replace("public/", "") : "";
      return v;
    });
  }
};
</script>

<style lang="less" scoped>
.banner {
  .txt {
    .size(3.3vw, 66px);
    font-weight: 800;
    text-align: left;
    .icon {
      display: flex;
      align-items: baseline;
      margin: 0;
      padding: 0 0 30px 0;
    }
  }

  .list {
    background: rgb(55 114 200 / 31%);
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    z-index: 9;
    padding: 0;

    .item {
      text-align: center;
      flex: 0.25;

      p {
        display: flex;
        align-items: end;
        justify-content: center;
        .size(1vw, 14px);
        margin: 0 0 min(2vw, 15px) 0;

        b {
          .size(3.4vw, 48px);
          margin-right: 5px;
        }
      }
    }
  }

  ::v-deep {
    .carousel-caption {
      bottom: 34%;
      left: 10%;
    }
  }
}
</style>
